import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Drawer, List, Avatar, Divider, Col, Row, Button,Space,Popover } from 'antd';
import { AntDesignOutlined, UserOutlined, PoweroffOutlined } from '@ant-design/icons';

// 引入自定义组件
import DataShow from './components/DataShow';
import EmpDataShow from './components/EmpDataShow';
import UploadHeader from './components/UploadHeader';
import SendTask from './components/SendTask';
import UpdateUserInfo from './components/UpdateUserInfo';
// 引入操作
import { ChangeUserinfoActivate } from '../../redux/actions/userinfo'
import { IsUserLogin } from '../../redux/actions/popup'
import {GetUserBaseInfo} from '../../redux/actions/userinfo'
import { API_URL } from '../../env';
// 引入css
import './index.css'
import { ChangeSpinACtivate } from '../../redux/actions/public';

const DescriptionItem = ({ title, content }) => (
    <div className="site-description-item-profile-wrapper">
      <p className="site-description-item-profile-p-label">{title}:</p>
      {content}
    </div>
  );

class UserInfo extends Component {
  
    onClose = () => {
      this.props.ChangeUserinfoActivate({activate:false})
    };

    takeTask = () => {
      this.props.ChangeUserinfoActivate({
        taskManageActivate: false,
        activate:false
      })
    }
    senTask = () => {
      console.log("发布任务")
      this.props.ChangeUserinfoActivate({sendTaskActivate:true})
      this.props.ChangeSpinACtivate({sendTask_activate: false})
    }
  
    render() {
      const {userinfoState, baseUserInfoState, GetUserBaseInfo, ChangeUserinfoActivate} = this.props
      // console.log("baseinfo: ", baseUserInfoState)
      return (
        <>
          <Drawer
            width={640}
            placement="right"
            closable={true}
            onClose={this.onClose}
            visible={userinfoState.activate}
            // visible={true}
            headerStyle={{"color": "red"}}
            maskClosable={false}
            extra={
                <Space>
                    {/* 区别对待，用户两个身份，雇主和猎人 */}
                  <Button onClick={baseUserInfoState.user_identity ? this.takeTask: this.senTask} type="primary">
                    {
                      baseUserInfoState.user_identity 
                      ?
                      "领取任务" 
                      : 
                      "发布任务"
                    }
                    
                  </Button>
                </Space>
              }
          >
            <div>
                {/* 头像 */}
                <Avatar  
                    style={{left: 240}}
                    size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
                    icon={<AntDesignOutlined />} 
                    src={API_URL + "get_img/head_img/" + baseUserInfoState.username} // 用户头像
                />
                <UploadHeader />
            </div>
            <Divider />
            <Popover content="点击可进行个人信息修改和更改密码" title="温馨提示" >
              <a>
                <p 
                  className="site-description-item-profile-p"
                  onClick={()=>{
                    ChangeUserinfoActivate({
                      activate: !userinfoState.activate,
                      updateUserInfoAct: !userinfoState.updateUserInfoAct
                    })
                  }}
                  >
                    个人信息
                </p>
              </a>
            </Popover>
            <Row>
              <Col span={12}>
                <DescriptionItem title="昵称" content={baseUserInfoState.nickname} />
              </Col>
              <Col span={12}>
                <DescriptionItem title="账号" content={baseUserInfoState.username} />
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <DescriptionItem title="性别" content={baseUserInfoState.gender}/>
              </Col>
              <Col span={12}>
                <DescriptionItem title="邮箱" content={baseUserInfoState.email} />
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <DescriptionItem
                  title="个人介绍"
                  content={baseUserInfoState.userintro}
                />
              </Col>
            </Row>
            <Divider />
            <Popover content="点击可进行任务领取或管理页面" title="温馨提示">
                <a>
                    <p className="site-description-item-profile-p" onClick={()=>{
                      ChangeUserinfoActivate({
                        taskManageActivate: !userinfoState.taskManageActivate,
                        activate: false
                      })
                      console.log("点击查看详细")
                      }}>任务情况</p>
                </a>
            </Popover>
            {/* 任务数据展示,猎人 | 雇主的不一样 */}
            {
            baseUserInfoState.user_identity 
            ?
              <DataShow />
            :
              <EmpDataShow />
            }
            <Divider />
            {/* 退出登录 身份切换：猎人|雇主 */}
            <div>
              <Button
                type="primary"
                shape='round' 
                size='large' 
                icon={<PoweroffOutlined />} 
                style={{float:'right'}}
                onClick={()=>{
                  this.props.IsUserLogin({isLogin: false})
                  this.props.ChangeUserinfoActivate({activate: false})
                  ChangeUserinfoActivate({
                    taskManageActivate: false,
                    activate: false
                  })
                  setTimeout(()=>{window.location.reload()}, 100)
                  
                }}
              >退出</Button>
              <Popover content={(<div>点击切换身份</div>)}>
                <Button 
                  shape='round' 
                  danger 
                  size='large' 
                  icon={<UserOutlined />} 
                  style={{float:'left'}}
                  onClick={()=>{
                      baseUserInfoState.user_identity 
                      ?
                      GetUserBaseInfo({user_identity: 0})
                      :
                      GetUserBaseInfo({user_identity: 1})
                      
                      console.log("hhhhh:", baseUserInfoState)
                    }}>
                    {
                      baseUserInfoState.user_identity 
                      ?
                      "猎人"
                      :
                      "雇主"
                    }
                </Button>
              </Popover>
              <br />
            </div>
            
          </Drawer>
          {/* <Drawer
            title="Two-level Drawer"
            width={640}
            closable={ture}
            onClose={this.onChildrenDrawerClose}
            visible={this.state.childrenDrawer}
            // visible={true}
          >
            This is two-level drawer
          </Drawer> */}
          <SendTask />

          <UpdateUserInfo />
        </>
      );
    }
}

export default connect(
    state => ({
      userinfoState: state.UserInfoReducer.userinfo,
      baseUserInfoState: state.PublicReducer.baseUserInfo
    }),
    {
      ChangeUserinfoActivate,
      IsUserLogin,
      GetUserBaseInfo,
      ChangeSpinACtivate
    }
)(UserInfo)